<template>
    <div class="cart" @click="couponAvailable = false" style="height: 100%;">
        <BaseHeader></BaseHeader>
        <!-- LOGO 搜索 -->
        <div class="width_1200 logo">
            <div class="logo-one">
                <!-- <router-link to="/"><img :src="$store.state.logoImg" /></router-link> -->
                <div>
                    {{ cartTitle }}(<span>{{ goodsTotal }}</span>)

                </div>
            </div>
            <div class="logo-tow">
                <div @click="getCartList"> 查看选品 </div>
                <div @click="fnnamegoodsShow" id="topLookGoods"> 查看已提交计划 ></div>
            </div>
            <div class="nameselect" v-show="namegoodsShow" @click="namegoodslookfn">
                <div class="nameselect-one" id="nameselectOne">
                    <p v-for="(item, index) in numLookName" :id="index" :key="item.id">
                        {{ item.title }}
                    </p>
                </div>
            </div>
        </div>
        <!-- <Divider /> -->
        <!-- 选品库主体 -->
        <div class="cart-content width_1200 center" :style="{ minHeight: `${cartHeadth}px` }">
            <!-- 选品库商品列表 -->
            <div class="cart-goods">
                <div class="cart-goods-title">
                    <div class="width_150">
                        <Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
                    </div>
                    <div class="goods-title">商品</div>
                    <div class="width_150">单价（元）</div>
                    <div class="width_150">小计</div>
                    <div class="width_100">操作</div>
                </div>
                <!-- 我的选品库商品列表 -->
                <div v-show="nowHistoryShow">
                    <div v-if="skuList.length === 0" class="cart-empty">
                        <p>选品库空空如也</p>
                        <router-link to="/">去选购&gt;</router-link>
                    </div>
                    <!-- 商品列表 -->
                    <div v-else class="cart-goods-items">
                        <!-- :key="goods.goods_id" -->
                        <div v-for="(goods, goodsIndex) in skuList" :key="goodsIndex">
                            <div class="goods-item">
                                <!-- // -->
                                <div class="width_150" style="width: 150px;">
                                    <Checkbox v-model="goods.checked"
                                        @on-change="changeChecked(goods.checked, 'goods', goods.goods_id, goodsIndex)">
                                    </Checkbox>
                                </div>
                                <div class="goods-title" @click="goGoodsDetail(goods.goods_id)">
                                    <img :src="goods.goods.photos[0]" />
                                    <div style="display: flex; flex-direction: column; justify-content: space-between;">
                                        <p>
                                            {{ goods.goodssku.goods_name }}
                                        </p>

                                        <p>
                                            <Tag class="goods-show-tag" color="red">{{ goods.goodsorign }}</Tag>
                                            <Tag class="goods-show-tag" color="blue">{{ goods.cangku }}</Tag>
                                        </p>
                                    </div>
                                </div>
                                <div class="width_150">
                                    {{ goods.goodssku.fx_price | unitPrice("￥") }}
                                </div>
                                <!-- <div class="width_100">
                                <InputNumber :min="1" size="small" v-model="goods.cartnum"
                                    @on-change="changeNum(goods.cartnum, goods.goods_id, goodsIndex)"></InputNumber>
                                <div class="fontsize_12" v-if="false">
                                    {{ goods.goodssku.stock > 0 ? "有货" : "无货" }}
                                </div>
                            </div> -->
                                <div class="width_150">
                                    <!-- {{ goodsTotalPrice(goods) | unitPrice("￥") }} -->
                                </div>
                                <div class="width_100">
                                    <Button v-if="!goods.errorMessage" size="small" type="primary"
                                        @click="delGoods(goods.id)">删除</Button>
                                    <Button v-if="!goods.errorMessage && false" size="small" type="info"
                                        @click="collectGoods(goods.goods_id)" style="margin-left: 10px">收藏</Button>
                                </div>
                                <!-- <div class="error-goods" v-if="goods.errorMessage">
                                <div style="margin-top: 20px">{{ goods.errorMessage }}</div>
                                <Button type="primary" @click="delGoods(goods.id)">删除2</Button>
                            </div> -->
                            </div>
                        </div>

                    </div>
                </div>
                <!-- -------历史订单商品列表--------- -->
                <div v-show="!nowHistoryShow">
                    <div v-if="+goodsTotal <= 0" class="cart-empty">
                        <p>计划里面空空如也</p>
                        <div @click="getCartList" style="color: #2D8cF0; cursor: pointer;">去添加 ></div>
                    </div>
                    <!-- 商品列表 -->
                    <div v-else class="cart-goods-items">
                        <!--  :key="goods.goods_id" -->
                        <div v-for="(goods, goodsIndex) in skuListHis" :key="goodsIndex">
                            <div class="goods-item">
                                <!-- // -->
                                <div class="width_150" style="width: 150px;">
                                    <Checkbox v-model="goods.checked"
                                        @on-change="changeChecked(goods.checked, 'goods', goods.goods_id, goodsIndex)">
                                    </Checkbox>
                                </div>
                                <div class="goods-title" @click="goGoodsDetail(goods.goods_id)">
                                    <img :src="goods.photo || '../assets/images/goodsDetail/item-detail-1.jpg'" />
                                    <div style="display: flex; flex-direction: column; justify-content: space-between;">
                                        <p>
                                            {{ goods.goods_name }}
                                        </p>

                                        <p>
                                            <Tag class="goods-show-tag" color="red">{{ goods.goodsorign }}</Tag>
                                            <Tag class="goods-show-tag" color="blue">{{ goods.cangku }}</Tag>
                                        </p>
                                    </div>
                                </div>
                                <div class="width_150">
                                    {{ goods.fx_price | unitPrice("￥") }}
                                </div>
                                <!-- <div class="width_100">
                                <InputNumber :min="1" size="small" v-model="goods.cartnum"
                                    @on-change="changeNum(goods.cartnum, goods.goods_id, goodsIndex)"></InputNumber>
                                <div class="fontsize_12" v-if="false">
                                    {{ goods.goodssku.stock > 0 ? "有货" : "无货" }}
                                </div>
                            </div> -->
                                <div class="width_150">
                                    {{ goodsTotalPrice(goods) | unitPrice("￥") }}
                                </div>
                                <div class="width_100">
                                    <Button v-if="!goods.errorMessage" size="small" type="primary"
                                        @click="delGoods(goods.pre_purchase_goods_id)">删除</Button>
                                    <!-- <Button v-if="!goods.errorMessage && false" size="small" type="info"
                                        @click="collectGoods(goods.goods_id)" style="margin-left: 10px">收藏</Button> -->
                                </div>
                                <!-- <div class="error-goods" v-if="goods.errorMessage">
                                <div style="margin-top: 20px">{{ goods.errorMessage }}</div>
                                <Button type="primary" @click="delGoods(goods.id)">删除2</Button>
                            </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部支付栏 -->
                <div class="cart-goods-footer">
                    <div>
                        <div class="width_60">
                            <Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
                        </div>
                        <div class="width_100 handle-btn" @click="delGoods()">
                            删除选中商品
                        </div>
                        <!-- <div class="width_100 handle-btn" @click="collectGoods">移到我的收藏</div> -->
                        <div class="width_100 handle-btn" @click="clearCart" v-show="nowHistoryShow">
                            清空选品库
                        </div>
                        <div class="width_100 handle-btn" v-show="!nowHistoryShow" @click="delGainPlanDelPlan">
                            <!-- 删除计划 -->
                        </div>
                    </div>
                    <div class="item-cc">
                        <div class="pay ml_20" @click="suspendfn(1)" id="submitPay" v-if="nowHistoryShow">
                            {{ "提交新计划" }}
                        </div>
                        <div class="pay ml_201" @click="suspendfn(2)" id="submitPay" v-if="nowHistoryShow">
                            {{ "提交到已有计划" }}
                        </div>
                        <div class="selected-count">
                            已选择<span>{{ checkedNum }}</span>件商品
                        </div>

                        <!-- ----------------------------提交按钮 -->
                    </div>
                </div>
            </div>
            <!-- <Spin size="large" fix v-if="loading"></Spin> -->
        </div>
        <Safedata></Safedata>
        <!-- ----------------弹出层-------------------------- -->
        <div class="suspend " v-show="suspendIsShow" :style="{ height: `${cartHeadth}px`, }">
            <div class="suspend-text" id="suspendText" ref="suspendText">
                <div class="shut" @click="fnshutext">×</div>
                <ul class="title-sus">
                    <li v-show="suspendType == 1">创建新计划</li>
                    <li v-show="suspendType == 2">添加到已有计划</li>
                </ul>
                <div class="sus-content">
                    <input v-model="goodsSubName" type="text" class="addgoods" placeholder="输入订单名称"
                        v-show="suspendType == 1">
                    <select name="" id="" class="history" v-model="LookNameData" v-show="suspendType == 2">
                        <option :value="index" v-for="(item, index) in numLookName" :key="item.id">{{
                            item.title }}
                        </option>
                    </select>
                </div>
                <div class="sus-btn">
                    <button class="submit" @click="pay">提交计划</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Promotion from "@/components/goodsDetail/Promotion";
import Search from "@/components/Search";
import * as APICart from "@/api/cart";
import * as APIMember from "@/api/member";

import { deepClone } from "@/plugins/Foundation";
import Storage from "@/plugins/storage";

import { Header, Input } from 'view-design';
import router from "../router";

export default {
    name: "Cart",
    beforeRouteEnter(to, from, next) {
        window.scrollTo(0, 0);
        next();
    },
    components: {
        Search,
        Promotion,
    },
    data() {
        return {
            cartTitle: "选品库",
            couponAvailable: false, // 展示优惠券
            stepIndex: 0, // 当前处于哪一步，选品库==0，填写订单信息==1，成功提交订单==2
            goodsTotal: 0, // 商品数量
            checkedNum: 0, // 选中数量
            allChecked: false, // 全选
            loading: false, // 加载状态
            cartList: [], // 选品库列表
            couponList: [], // 优惠券列表
            priceDetailDTO: {}, // 价格明细
            skuList: [], // sku列表,
            userInfo: {},
            purchase: { type: '', id: '' },
            purchaseVal: '',
            cartHeadth: '',
            ConvertedShow: false,
            titleSuspend: true,//提交弹框标题高亮
            suspendIsShow: false,//遮罩层显示和隐藏
            goodsSubName: '',//新建提交计划名称
            numLookName: [ //历史提交计划的名称
                { id: '1', title: '1.1' },
                { id: '2', title: '2.2' },
                { id: '3', title: '3.3' },
            ],
            LookNameData: 0,//选择的历史订单名称
            namegoodsShow: false,
            skuListHis: [],//历史提交商品
            nowHistoryShow: true,//历史列表，选品库列表
            goodsid_order: '',//预计划名称id
            suspendType: 0,//弹出层类型
            btnSubmit: true,//按钮
        };
    },

    created() {
        if (Storage.getItem('userInfo') && Storage.getItem('userInfo') != 'undefined') {
            this.userInfo = JSON.parse(Storage.getItem('userInfo'));
        }

        if (Storage.getItem('PURCHASE') && Storage.getItem('PURCHASE') != 'undefined') {
            this.purchase = JSON.parse(Storage.getItem('PURCHASE'));
        }
    },

    computed: {
        // 单件商品总金额
        goodsTotalPrice() {
            return function (goods) {
                if (goods.fx_price * goods.num) {
                    return (goods.fx_price * goods.num).toFixed(2);
                } else return (goods.fx_price * goods.num).toFixed(2);
            }
        }
    },
    methods: {
        // 跳转商品详情
        goGoodsDetail(goodsId) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goods_id: goodsId
                }
            })
        },
        // 跳转店铺首页
        goShopPage(id) {
            let routeUrl = this.$router.resolve({
                path: "/Merchant",
                query: {
                    id
                },
            });
            window.open(routeUrl.href, "_blank");
        },
        // 删除商品
        delGoods(id) {
            const idArr = [];
            this.$Modal.confirm({
                title: "删除",
                content: "<p>确定要删除该商品吗？</p>",
                onOk: async () => {
                    if (this.cartTitle !== '选品库') {
                        // 计划商品删除 pre_purchase_goods_id
                        if (!id) {
                            this.skuListHis.forEach((goods) => {
                                if (goods.checked) {
                                    idArr.push(goods.pre_purchase_goods_id);
                                }
                            });
                        } else {
                            idArr.push(id);
                        }

                        // 预选计划商品删除
                        const delId = { sige_id: idArr.toString() };
                        const res = await APICart.gainPlanDel(delId)
                        res.code == 1 ? this.$Message.success("删除成功") : this.$Message.error(res.msg);
                        res.code == 1 ? this.gainPlanGoodsApi({ purchase_id: this.numLookName[e.target.id].id }) : () => { }
                        // console.log(idArr, '删除id');
                    } else {
                        // 选品库删除
                        if (!id) {
                            this.skuList.forEach((goods) => {
                                if (goods.checked) {
                                    idArr.push(goods.id);
                                }
                            });
                        } else {
                            idArr.push(id);
                        }
                        // 选品库商品删除
                        APICart.delCartGoods({
                            id: idArr.toString()
                            // 
                        }).then((res) => {
                            if (res.code == 1) {
                                this.$Message.success("删除成功");
                                this.getCartList();
                            } else {
                                this.$Message.error(res.msg);
                            }
                        });
                        console.log(idArr, '删除id');
                    }
                },
            });

        },
        //--- 复选框选中商品
        async changeChecked(status, type, id = null, index = null) {
            let check = status;
            let checkedNum = 0;
            let skuList = deepClone(this.skuList); //选品库商品
            let skuListHis = deepClone(this.skuListHis);//预计划订单商品
            if (type === "all") {
                if (this.cartTitle === '选品库') {
                    for (let i in skuList) {
                        skuList[i].checked = check;
                        if (check) {
                            checkedNum++;
                        }
                    }
                    this.checkedNum = checkedNum;
                    this.skuList = skuList;
                } else {
                    for (let i in skuListHis) {
                        skuListHis[i].checked = check;
                        if (check) {
                            checkedNum++;
                        }
                    }
                    this.checkedNum = checkedNum;
                    this.skuListHis = skuListHis
                }

                this.allChecked = check;

            } else if (type === "shop") {

            } else {
                if (this.cartTitle == '选品库') {
                    skuList[index].checked = check;
                    this.checkedNum = check ? this.checkedNum + 1 : this.checkedNum - 1
                    if (this.checkedNum > skuList.length) {
                        this.allChecked = true;
                    } else {
                        this.allChecked = false;
                    }
                    this.skuList = skuList;
                } else {
                    skuListHis[index].checked = check;
                    this.checkedNum = check ? this.checkedNum + 1 : this.checkedNum - 1
                    if (this.checkedNum > skuListHis.length) {
                        this.allChecked = true;
                    } else {
                        this.allChecked = false;
                    }
                    this.skuListHis = skuListHis;
                }
                // this.dtoFlowPrice();
                console.log(this.skuListHis, this.skuList);
                this.$forceUpdate()
            }
        },
        // 清空选品库
        clearCart() {
            this.$Modal.confirm({
                title: "提示",
                content: "<p>确定要清空选品库吗？清空后不可恢复</p>",
                onOk: () => {
                    APICart.clearCart().then((res) => {
                        if (res.code == 1) {
                            this.$Message.success("清空选品库成功");
                            this.getCartList();
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
                },
            });
        },
        // 点击显示提交遮罩层 计划订单提交到后台
        suspendfn(index) {
            this.suspendType = index
            // if (this.checkedNum <= 0) {
            //     this.$Message.warning("请选择商品")
            //     return
            // }
            this.suspendIsShow = true
        },
        // 关闭遮罩层
        fnshutext() {
            this.suspendIsShow = false
            window.onscroll = function () { };
            this.goodsSubName = ''
            this.LookNameData = 0
        },
        // 点击提交选品订单
        pay() {
            //  this.suspendType
            if (this.suspendType == 1) {
                if (this.goodsSubName == '') {
                    this.$Message.warning("请输入计划名称");
                    return
                }
                // else if (this.numLookName.includes(this.goodsSubName)) {
                //     this.$Message.warning("已创建的计划请选择历史计划")
                //     this.goodsSubName = ''
                //     return
                // }

                let goodsArr = [];
                this.skuList.forEach((goods) => {
                    if (goods.checked) {
                        goodsArr.push({ tender_cart_id: goods.id, num: goods.num });
                    }
                });
                let params = { tender_cart: goodsArr, name: this.goodsSubName };
                APICart.submitCartGoods(params).then((res) => {
                    if (res.code == 1) {
                        this.$Message.success("提交成功");
                        this.getCartList();
                        this.suspendIsShow = false
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            } else if (this.suspendType == 2) {
                let goodsArr = [];
                this.goodsid_order = this.numLookName[this.LookNameData].id
                this.skuList.forEach((goods) => {
                    if (goods.checked) {
                        goodsArr.push(goods.id);
                    }
                });
                let params = { tender_cart: goodsArr.join(','), purchase_id: this.goodsid_order };
                console.log(params);
                APICart.gainPlanAddGoods(params).then((res) => {
                    if (res.code == 1) {
                        this.$Message.success("提交成功");
                        this.getCartList();
                        this.fnshutext()
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            }

        },
        // 点击查看历史计划商品
        // planCheck() {
        //     if (this.LookNameData + 1 > 0) {
        //         this.cartTitle = this.numLookName[this.LookNameData].title
        //         this.goodsid_order = this.numLookName[this.LookNameData].id
        //         this.suspendIsShow = false
        //         this.nowHistoryShow = false
        //         this.gainPlanGoodsApi({ pre_purchase_id: this.numLookName[this.LookNameData].id })
        //     } else {
        //         this.$Message.warning("请选择计划名称");
        //     }
        // },

        // 头部选择已有提交
        namegoodslookfn(e) {
            this.cartTitle = this.numLookName[e.target.id].title
            this.goodsid_order = this.numLookName[e.target.id].id
            this.namegoodsShow = false
            this.nowHistoryShow = false
            this.gainPlanGoodsApi({ purchase_id: this.numLookName[e.target.id].id })
        },

        //获取提交计划里的商品
        async gainPlanGoodsApi(name) {
            this.loading = true;
            try {
                const res = await APICart.gainPlanGoods(name)
                this.goodsTotal = res.data.total;
                this.skuListHis = res.data.items
            } catch (error) {

            }
            this.$forceUpdate();
        },
        // 头部预计划名称
        fnnamegoodsShow() {
            this.gainPlanNameApi()
            this.namegoodsShow = !this.namegoodsShow
        },
        // 获取预计划名字
        async gainPlanNameApi() {
            const res = await APICart.gainPlanName()
            this.numLookName = res.data.items

        },
        // 展示优惠券
        showCoupon(storeId, index) {
            this.couponAvailable = index;
        },
        // 设置购买数量
        changeNum(val, id, index) {
            if (val) {
                APICart.setCartGoodsNum({
                    goods_id: id,
                    num: val
                }).then((res) => {
                    if (res.code == 1) {
                        //this.getCartList();
                        this.skuList[index]['cartnum'] = val;
                        this.$forceUpdate();
                        this.dtoFlowPrice();
                    }
                });
            }
        },
        // 选品库列表
        async getCartList() {
            this.nowHistoryShow = true
            this.loading = true;
            this.cartTitle = '选品库'
            try {
                let res = await APICart.cartGoodsAll();
                this.loading = false;
                if (res.code == 1) {
                    //this.cartList = res.data.items;
                    //this.priceDetailDTO = res.result.priceDetailDTO;
                    let skuList = []
                    res.data.items.forEach((item) => {
                        item.checked = false
                        skuList.push(item)
                    })
                    this.skuList = skuList
                    this.checkedNum = 0;
                    let allChecked = true;
                    /* for (let k = 0; k < this.cartList.length; k++) {
                        let shop = this.cartList[k];
                        let list = await APIMember.couponList({
                            storeId: shop.storeId
                        });
                        shop.couponList.push(...list.result.records);
                    } */
                    for (let i = 0; i < this.skuList.length; i++) {
                        if (this.skuList[i].checked) {
                            this.checkedNum++;
                        } else {
                            this.skuList[i].checked = false;
                            allChecked = false;
                        }
                    }
                    // this.$forceUpdate();
                    this.allChecked = allChecked;
                    console.log(this.skuList);
                    this.goodsTotal = res.data.total;
                    this.$forceUpdate();
                }
            } catch (error) {
                this.loading = false;
            }
        },
        // 提交遮罩层高度
        cartH() {
            this.cartHeadth = document.documentElement.clientHeight
        },
        // 删除预计划
        async delGainPlanDelPlan() {
            const res = await APICart.gainPlanDelPlan({ pre_purchase_id: this.goodsid_order })
            if (res.code === 1) {
                this.$Message.success("删除成功")
                this.getCartList()
            }
        },
        // 关闭弹出层
        handleDocumentClick(event) {
            // 检查点击是否发生在 myElement 或其子元素之外  
            if (event.target.id != 'nameselectOne' && event.target.id != 'topLookGoods') {
                this.namegoodsShow = false; // 隐藏顶部预选订单name  
            }
            if (event.target.id != 'suspendText' && event.target.id != 'submitPay' && !this.$refs.suspendText.contains(event.target)) {
                // this.suspendIsShow = false // 隐藏遮罩层 
                this.fnshutext()
            }
        }
    },
    mounted() {
        this.getCartList();
        this.cartH()
        this.gainPlanNameApi()
        // 监听整个文档的点击事件  
        document.addEventListener('click', this.handleDocumentClick);
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听器，避免内存泄漏  
        document.removeEventListener('click', this.handleDocumentClick);
    },
};
</script>

<style scoped lang="scss">
//提交订单遮罩层
.cart {
    position: relative;

    // height: ;
    .suspend {
        position: fixed;
        width: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
        // bottom: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;



        .suspend-text {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transform: scale(1.5);
            border-radius: 5px;

            .shut {
                font-size: 18px;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                line-height: 20px;
                text-align: center;
                background-color: rgba($color: #000000, $alpha: 0.3);
                position: absolute;
                top: -20px;
                right: -20px;
                color: #fff;
                cursor: pointer;
            }

            .title-sus {
                display: flex;
                border-bottom: 1px solid #000;
                justify-content: space-between;

                li {
                    width: 100%;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    background-color: #028fcc;
                    cursor: pointer;
                    margin: 0 auto;
                    color: #fff;
                }

                // .active {
                //     color: #fff;
                //     background-color: #028fcc;
                // }
            }

            .sus-content {

                // flex: 1;
                input {
                    width: 90%;
                    height: 40px;
                    margin-left: 15px;
                }

                select {
                    width: 90%;
                    height: 40px;
                    margin-left: 15px;

                }

            }

            .sus-btn {
                display: flex;
                justify-content: space-evenly;
                margin-bottom: 10px;

                button {
                    width: 40%;
                    padding: 6px;
                    background-color: #028fcc;
                    color: #fff;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                }
            }
        }
    }
}

/** logo 搜索 start **/
.logo {
    height: 40px;
    margin: 40px 0;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    width: 1200px;
    margin: 30px auto;

    .logo-one {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-tow {
        font-size: 10px;
        text-align: right;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    .nameselect {
        width: 200px;
        height: 150px;
        background-color: #fff;
        box-shadow: 0 0 2px 0 #000;
        position: absolute;
        right: 0;

        z-index: 55;
        line-height: 2;
        border-radius: 4px;
        padding: 5px;
        overflow: hidden;

        .nameselect-one {
            width: 220px;
            height: 145px;
            position: absolute;
            overflow-y: auto;

            p {
                border-bottom: #999 1px solid;
                font-size: 14px;
                padding-left: 40px;
                cursor: pointer;
            }
        }

    }
}

.cart-content {
    margin: 0 auto;
    width: 1200px;
    position: relative;

}

/** logo end */
/** step步骤条 */
.cart-steps {
    height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    span {
        @include content_color($light_content_color);
        height: 30px;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        padding: 0 15px;
    }

    .ivu-icon {
        @include content_color($light_content_color);
        font-size: 20px;
        margin: 0 15px;
    }

    .active {
        border-radius: 50px;
        background-color: #ff8f23;
        color: #fff;
    }

    .active-arrow {
        color: #ff8f23;
    }
}

/** 步骤条和配送区域总体 */
.available-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.cart-goods-title div {
    text-align: unset !important;
}

/** 商品列表 */
.cart-goods {
    &-title {
        height: 50px;
        @include background_color($light_white_background_color);
        @include title_color($title_color);
        display: flex;
        align-items: center;
        padding: 0 20px;

        div {
            text-align: center;
        }

        .goods-title {
            flex: 1;
        }
    }

    .cart-empty {
        width: 100%;
        text-align: center;
        height: 300px;
        padding-top: 100px;
    }

    &-items {
        .shop-name {
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: relative;
            @include title_color($light_title_color);

            >* {
                width: 50%;
            }

            .go-shop-page:hover {
                color: $theme_color;
                cursor: pointer;
            }

            .customer-service {
                margin-left: 5px;
                color: #fcc217;
                cursor: pointer;

                &:hover {
                    color: $theme_color;
                }
            }

            /** 优惠券 */
            .shop-coupon {
                width: 80px;
                height: 24px;
                position: relative;
                // background: url(../assets/images/cart-coupon-icons02.png) 0 0 no-repeat;

                >div {
                    position: absolute;
                    top: 35px;
                    left: 0;
                    width: 300px;
                    height: 300px;
                    background-color: #fff;
                    border: 1px solid $theme_color;
                    // border-radius: 3px;
                    z-index: 1;
                    padding: 10px 20px;

                    &::before {
                        content: "";
                        display: block;
                        // background: url(../assets/images/cart-coupon-icons02.png) 0 -58px no-repeat;
                        width: 80px;
                        height: 12px;
                        position: absolute;
                        top: -12px;
                        left: 0;
                    }

                    .coupon-item {
                        margin-bottom: 10px;

                        span:nth-child(1) {
                            border: 1px solid #e33937;
                            display: inline-block;
                            padding: 3px 10px;
                            color: $theme_color;
                            border-radius: 3px;
                        }

                        span:nth-child(2) {
                            font-size: 12px;
                            margin-left: 5px;
                            color: #999;
                        }

                        .coupon-btn {
                            height: 26px;
                            float: right;
                            font-size: 12px;
                        }

                        &::after {
                            display: block;
                            content: "";
                            clear: right;
                        }
                    }
                }
            }

            .promotion-notice {
                text-align: right;
                font-size: 12px;
            }

            .shop-coupon-show {
                background-position-y: -34px;
            }
        }

        .goods-item {
            position: relative;
            @extend .cart-goods-title;
            @include background_color($light_white_background_color);
            padding: 10px 20px;
            height: auto;

            >div:nth-child(1) {
                padding-left: 15px;
                width: 30px;
            }

            >div:nth-child(2) {
                cursor: pointer;
                display: flex;
                box-sizing: border-box;
                //padding-left: 20px;
                position: relative;

                img {
                    width: 70px;
                    height: 70px;
                }

                >div>p {
                    @include content_color($light_content_color);
                    font-size: 13px;
                    text-align: left;
                    margin-left: 10px;

                    &:hover {
                        color: $theme_color;
                    }
                }
            }

            >div:nth-child(5) {
                font-weight: bold;
            }

            .num-input {
                width: 60px;
                border: 1px solid #999;
                border-radius: 5px;
                padding: 0 5px;

                &:focus {
                    outline-color: $theme_color;
                }
            }
        }

        .error-goods {
            position: absolute;
            width: 100%;
            height: 100%;
            margin-left: -20px;
            background-color: rgba($color: #999, $alpha: 0.5);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 150px;
            color: #000;
            padding-right: 30px;
        }
    }

    &-footer {
        @extend .cart-goods-title;
        position: sticky;
        bottom: 0;
        border-top: 1px solid #ddd;
        margin-top: 10px;
        padding: 0 0 0 20px;
        line-height: 50px;
        justify-content: space-between;

        >div {
            display: flex;
            text-align: center !important;
        }

        .selected-count {
            span {
                color: $theme_color;
            }
        }

        .save-price span {
            color: #000;
        }

        .pay {
            background-color: $theme_color;
            width: 150px;
            font-size: 20px;
            color: #fff;
            height: 100%;
            line-height: 50px;
            cursor: pointer;
        }
    }

    .handle-btn {
        font-size: 12px;
        color: $handle-btn-color;
        cursor: pointer;

        &:hover {
            color: $theme_color;
        }
    }
}

.like {
    width: 1200px;
    margin: 10px auto;
    // padding: 20px 0;
    @include white_background_color();
}

.likeGoods,
.shop-nav-container {
    width: 1200px;
    margin: 0 auto;
}

.width_150 {
    width: 150px;
}

.width_60 {
    width: 60px;
}

.promotion {
    display: flex;
    margin-top: 5px;
    margin-left: 5px;

    >span {
        border: 1px solid $theme_color;
        color: $theme_color;
        font-size: 12px;
        border-radius: 2px;
        padding: 0 2px;
    }

    >p {
        font-size: 12px;
        margin-left: 10px;
        color: #999;
    }
}

.cart-goods-footer {
    div {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .item-cc {
        flex: 1;

        .pay {
            border-radius: 5px;
            font-size: 18px;
            height: 40px;
        }

        .ml_20 {
            margin: 0 50px;
        }

        .ml_201 {
            margin-right: 200px;
        }
    }



}
</style>
